<template>
  <div class="eit-greeting">
    <div class="greeting-box">
      <el-form ref="form" :rules="rules" :model="greet" label-width="120px">
        <el-form-item label="标题：" prop="title">
          <el-input size="mini" class="al-width-500" v-model="greet.title" maxlength="15" show-word-limit/>
        </el-form-item>
        <el-form-item label="使用人员：" prop="users">
          <el-button size="mini" type="primary" @click="dialogConcat=true">选择员工</el-button>
          <div class="wx-form-tag">
            <wx-link tag v-for="(c,i) in greet.users" :key="i">{{ c.name }}</wx-link>
          </div>
        </el-form-item>
        <el-form-item label="欢迎语：" prop="welcome">
          <el-input resize="none" :rows="10" type="textarea"
                    placeholder="请输入内容"
                    v-model="greet.welcome.text"
                    maxlength="1000" show-word-limit/>
        </el-form-item>
        <el-form-item label="欢迎语附件：" prop="others">
          <wx-wel-attach ref="welAttache" :attachs="greet.welcome.others"/>
        </el-form-item>
      </el-form>
      <div class="greet-foot">
        <el-button type="primary" @click="saveGreet">保 存</el-button>
      </div>
    </div>
    <!-- 员工弹窗 -->
    <wx-concat :choice-concats="greet.users" :show.sync="dialogConcat" @sure="greetUsers"/>
  </div>
</template>

<script>

import WxWelAttach from "@/components/wxqy/wxWelAttach/wxWelAttach";
import {greet_rules} from "@/api/wxqy/const";
import WxConcat from "@/components/wxqy/wxConcat/wxConcat";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import {addGreet, editGreet, findGreet} from "@/api/wxqy/contactWay";

export default {
  name: "edit-greeting",
  components: {WxLink, WxConcat, WxWelAttach},
  data() {
    return {
      dialogConcat: false,
      rules: greet_rules,
      greet: {
        welcome: {}
      }
    }
  },
  methods: {
    init(id) {
      if (id) {
        this.greet.id = id
        findGreet(id).then(e => {
          this.greet = e.data
        })
      }
    },
    greetUsers(users) {
      this.greet.users = users
    },
    welComeValidate() {
      let w = this.greet.welcome
      if (w.others && w.others.length || w.text) {
        return true
      }
      this.$message.error("欢迎语文案或附件不能同时为空")
      return false;
    },
    saveGreet() {
      this.greet.welcome.others = this.$refs.welAttache.findAttachements()
      this.$refs.form.validate(success => {
        if (success && this.welComeValidate()) {
          let message = (msg) => {
            this.$message.success(msg)
            this.$router.push({path: 'list'})
          }
          if (this.greet.id) {
            editGreet(this.greet).then(() => message('编辑成功'))
          } else {
            addGreet(this.greet).then(() => message('新增成功'))
          }
        }
      })
    }
  },
  created() {
    const id = this.$route.query.id || 0
    this.init(id)
  }
}
</script>

<style scoped lang="scss">
.eit-greeting {
  height: 100%;

  .greeting-box {
    border-radius: 14px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
  }

  .greet-foot {
    text-align: center;
  }
}
</style>
